<template>
  <div class="person-data" :style="{ height: `${viewheight.GetViewHeight(176)}px` }">
    <el-scrollbar>
      <div class="person-data-header">
        <label for="file-upload" class="custom-file-upload">
          <el-avatar :size="100" :src="userinfo.pic" class="avater-mask" />
        </label>
        <input id="file-upload" type="file" @change="selectfile" accept=".png, .jpg"/>
        <div class="person-info-header-right">
          <span style="font-size: 30px;">{{ userinfo.username }}</span>
          <span style="font-size: 15px">积分:{{ userinfo.code }}<el-icon :size="12">
              <IconPark :icon="Help" :fill="'#2a97d1'"/>
            </el-icon></span>
        </div>
      </div>
      <el-divider content-position="left">基本信息</el-divider>
      <div class="person-data-content">
        <FormComponent ref="formRef" :field-colums="PersonCon" :isdisable="true" />
      </div>
    </el-scrollbar>
  </div>
</template>

<script setup lang="ts">
import IconPark from "@components/IconPark.vue";
import { Help } from "@icon-park/vue-next";
import FormComponent from "@components/FormComponent/FormComponent.vue";
import { PersonCon } from "../config/person-data-config";
import { useViewHeightStore } from "@/store/viewheight";
import { useUserInfo } from "@store/userinfo";
import { storeToRefs } from "pinia";
import { ref, watch, onMounted } from "vue";
import SparkMd5 from "spark-md5";
import axios from "axios";
import { userupdata } from "@/api/userapi";

const { userinfo } = storeToRefs(useUserInfo());
const viewheight = useViewHeightStore();
const formRef = ref<InstanceType<typeof FormComponent>>();

const selectfile = async (e) => {
  const file: File = e.target.files[0];
  const spark = new SparkMd5.ArrayBuffer();
  if (file) {
    spark.append(await file.arrayBuffer());
  }
  const md5 = spark.end();
  let param = {
    fileName: md5 + "-" +file.name,
    fileSize: file.size,
    chunkSize: 10 * 1024 * 1024,
    partCount: 1,
    fileMd5: md5,
    contentType: "application/octet-stream",
    fileType: file.type,
  };

  const uploadIdInfoResult = await axios.post("/api/multipart/init", param);
  const uploadUrls = uploadIdInfoResult.data.data.urlList;

  const res = await axios.put(uploadUrls[0], file, {
    onUploadProgress: () => {},
    headers: {
      "Content-Type": "application/octet-stream",
    },
  })

  if(res.status == 200) {
    const resAvater = await axios.get("/api/multipart/getPic",{
      params: {
        fileName: md5 + "-" +file.name
      }
    })
    if(resAvater.data.code === 200) {
      userinfo.value.pic = resAvater.data.data;
      const resUpdate = await userupdata(userinfo.value);
      if(resUpdate.code === 200) {
        ElMessage.success("头像更换成功");
      }
    }
  }
}


watch(() => userinfo.value, () => {
  formRef.value.formData = userinfo.value;
}, { deep: true })


onMounted(() => {
  formRef.value.formData = userinfo.value;
})

</script>

<style scoped lang="less">
.person-data {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;


  .person-data-header {
    width: 500px;
    margin: 0 100px 0 50px;
    height: 120px;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    .custom-file-upload {
      display: inline-block;
      cursor: pointer;
      color: #fff;
    }

    #file-upload {
      opacity: 0;
      position: absolute;
      z-index: -1;
    }

    .avater-mask {
      &:hover {
        background-color: ghostwhite;
        opacity: 0.3;
        cursor: pointer;
      }
    }

    .person-info-header-right {
      height: 70%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      margin-left: 10px;
      font-size: 25px;

      .el-icon {
        cursor: pointer;
        vertical-align: text-top;
        margin-left: 3px;
      }
    }
  }

  .person-data-content {
    width: 600px;
    margin: 0 100px;
  }
}
</style>
